<template>
  <div class="px-4 pt-4">
    <div>未打卡人数：{{ nameList.length }}</div>
    <div class="mt-4">{{ nameList.join(',') }}</div>
  </div>
  <div class="center my-2">
    <wd-button @click="handleSendMsg">一键提醒</wd-button>
  </div>
  <wd-table :data="dataList" custom-class="p-4 text-center" :height="400">
    <wd-table-col prop="date" align="center" width="45%" label="日期" />
    <wd-table-col prop="percent" width="45%" align="center" label="执行度" />
  </wd-table>
  <wd-toast />
</template>

<script setup lang="ts">
import { useFetchAllSheetData } from '@/composables';

const { dataList, nameList, getData, findNoCheckInList, handleSendMsg } =
  useFetchAllSheetData();

onMounted(async () => {
  await getData();
  await findNoCheckInList();
});
</script>

<style lang="scss" scoped></style>
